Learn web development as an absolute beginner || What is MERN Stack?
By Gyanendra Kumar Knojiya
Sep 8, 2021 7:04 AM
It’s hard to know the best way to learn to code because there are a ton of resources out there. But right now, all you need is the basics of web development– a general explanation with some direction on where to go next.
First, here are the steps that you’ll need to follow as a beginner web developer.
Steps to learn web development basics:
- Learn the basics of how websites work, front-end vs back-end, and using a code editor
- Learn basic HTML, CSS, and JavaScript
- Learn tools: package managers, build tools, version control
-
Learn Sass, responsive design, JavaScript frameworks
Learn back-end basics: servers and databases, programming languages
What is web development?Before we get into actual coding, let’s first take a look at some general information on what web development is: how websites work, the difference between front and back-end, and using a code editor.
What’s the difference between front-end and back-end?
The terms “front end,” “back end,” and “full-stack” web developer describe what part of the client/server relationship you’re working with.
“Front end” means that you’re dealing mainly with the client-side. It’s called the “front end” because it’s what you can see in the browser. Conversely, the “back end” is the part of the website that you can’t really see, but it handles a lot of the logic and functionality that is necessary for everything to work.
One way you can think about this is that front-end web development is like the “front of house” part of a restaurant. It’s the section where customers come to see and experience the restaurant– the interior decor, seating, and of course, eating the food.
On the other hand, back-end web development is like the “back of house” part of the restaurant. It’s where deliveries and inventory are managed, and the process to create the food all happens. There’s a lot of things behind the scenes that the customers won’t see, but they will experience (and hopefully enjoy) the end product– a delicious meal!
Fun illustrations aside, both front and back-end web development serve different but very important functions.
What is the MERN Stack?
MERN stands for MongoDB, Express, React, Node, after the four key technologies that make up the stack.
- MongoDB - document database
- Express(.js) - Node.js web framework
- React(.js) - a client-side JavaScript library
- Node(.js) - the premier JavaScript web server
MERN is one of several variations of the MEAN stack (MongoDB Express Angular Node), where the traditional Angular.js frontend framework is replaced with React.js. Other variants include MEVN (MongoDB, Express, Vue, Node), and really any frontend JavaScript framework can work.
Express and Node make up the middle (application) tier. Express.js is a server-side web framework and Node.js is the popular and powerful JavaScript server platform. Regardless of which variant you choose, ME(RVA)N is the ideal approach to working with JavaScript and JSON, all the way through.
React.js Front End:
The top tier of the MERN stack is React.js, the declarative JavaScript framework for creating dynamic client-side applications in HTML. React lets you build up complex interfaces through simple Components, connect them to data on your backend server, and render them as HTML.
React’s strong suit is handling stateful, data-driven interfaces with minimal code and minimal pain, and it has all the bells and whistles you’d expect from a modern web framework: great support for forms, error handling, events, lists, and more.
Some tips to leave you with…
Thanks for reading! I sincerely hope that this guide helps you get started learning web development.
A few tips that I have if you are going the self-taught route:
- Don’t try to learn everything at once. Pick one skill to learn at a time.
- Don’t jump around from tutorial to tutorial. As you’re learning, it’s ok to check out different resources to see which one you like best. But again, pick one and try to go all the way through it.
- Know that learning web development is a long-term journey. Despite the stories you may have read of people going from zero to landing a web dev job in 3 months, I would aim more at 1 to 2 years to become job-ready, if you’re starting from the beginning.
- Just watching a video course or reading a book won’t automatically make you an expert. Learning the material is just the first step. Building actual websites and projects (even just demo ones for yourself) will help you to really cement your learning.
Best of luck as you start learning web development!